<template>
  <div class="recommend">
    <div class="recommend-item" v-for="(item,index) in recommpends" :key="index">
      <!--      每一个图片的连接-->
      <a :href="item.link"/>
      <!--      图片-->
      <img :src="item.image">
      <div>{{ item.title }}</div>
    </div>
  </div>

</template>

<script>
export default {
  name: "RecommendView",
  props: {
    recommpends: {
      type: Array,
      default() {
        return [];
      }
    }
  }
}
</script>

<style scoped>
.recommend {
  /*把数据 , 放到一行*/
  display: flex;
  /*指定宽*/
  width: 100%;
  /*居中显示*/
  text-align: center;
  /*  改变字体的大小写*/
  font-size: 12px;

  /*  指定外边距*/
  padding: 10px 0 20px;

  /*  指定下边框*/
  border-bottom: 10px solid #eee;
}

.recommend-item {
  /*让他们 , 分配均匀*/
  flex: 1;
}

/*修改图片的大小*/
.recommend-item img {
  /*  设置图片的宽*/
  width: 70px;
  /*  设置图片的高*/
  height: 70px;

  margin-bottom: 10px;
}

</style>
